<template>
	<view class="tag-box" :style="[{ gap: props.gap }, props.styles]">
		<view
			v-for="item in props.tagData"
			:key="item.value"
			:class="['tag-item', { active: props.active === item.value }]"
			:style="{ flex: flex ? `1` : `0 0 ${props.tagWidth}` }"
			@click="handleItem(item.value)"
		>{{ item.label }}</view>
	</view>
</template>

<script lang="ts" setup>
	interface OptsProps {
		value: any;
		label: string;
		[key: string]: string
	}
	interface Props {
		tagWidth?: string
		tagData: OptsProps[],
		flex?: boolean,
		gap: string,
		active: any,
		styles?: any
	}
	const props = defineProps<Props>()
	const emits = defineEmits(['change'])

	// 选择标签
	function handleItem (value: any) {
		emits('change', value)
	}
</script>

<style lang="scss" scoped>
	.tag-box {
		// padding-top: 15px;
		display: flex;
		.tag-item {
			border: 1px solid rgba(152, 152, 152, 1);
			border-radius: 4px;
			background-color: #fff;
			color: #989898;
			font-size: 14px;
			text-align: center;
			flex: 1;
			flex-shrink: 0;
			height: 27px;
			line-height: 27px;
			
			// &.tag-item {
			// 	margin-left: 19px;
			// }
			
			&.active {
				color: #fff;
				border-color: $uni-main-color;
				background-color: $uni-main-color;
			}
		}
	}
</style>